<template>
	<div>
		<el-row>
			<el-tabs type="border-card" v-model="editableTabsValue" closable @tab-remove="removeTab">
				<el-tab-pane label="网站管理">
					<el-button type="primary" @click="add">新增</el-button>
					<el-button type="info" @click="toPerpage">个人信息</el-button>
					<el-table :data="webs">
						<el-table-column prop="id" label="id"></el-table-column>
						<el-table-column prop="name" label="网站">
							<template slot-scope="s">
									<a :href="s.row.href">{{s.row.name}}</a>
							</template>
						</el-table-column>
						<el-table-column prop="href" label="地址">
						</el-table-column>
						<el-table-column prop="type" label="类型"></el-table-column>
						<el-table-column prop="start" label="星级"></el-table-column>
						<el-table-column label="操作">
							<template slot-scope="s">
					<!-- 利用作用域插槽，将当前行作为参数传给了方法del -->
					<!-- s.$index可以获取当前行数据的索引 -->
								<el-button type="danger" @click="del(s.$index,s.row.id)">删除</el-button>
								<el-button type="success" @click="edit(s.$index,s.row)">编辑</el-button>
							</template>
						</el-table-column>
					</el-table>
  
					<el-dialog title="" :visible.sync="dialogFormVisible">
						<el-form :model="form" label-width="100px">
							<el-form-item label="网站名称">
								<el-input v-model="form.name" autocoplete="off"></el-input>
							</el-form-item>
							<el-form-item label="网站网址">
								<el-input v-model="form.href" autocoplete="off">
									 <template slot="prepend">http://</template>
								</el-input>
							</el-form-item>
							<el-form-item label="网站类型">
								 <el-select v-model="form.type" placeholder="请选择">
									<el-option v-for="(t,i) in types" :label="t" :value="t" :key="i"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="网站评分">
								<el-rate v-model="form.start" :colors="colors"></el-rate>
							</el-form-item>
						</el-form>
					</el-dialog>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisible = false">取 消</el-button>
						<el-button v-show="!isedit" type="primary" @click="sureAdd">确 定</el-button>
						<el-button v-show="isedit" type="primary" @click="sureUpdate">修 改</el-button>
					</div>
				</el-tab-pane>
				<!-- <el-tab-pane label="配置管理" :closable="false">
					djsjdk
				</el-tab-pane> -->
				<el-tab-pane
						:key="item.name"
						v-for="(item, index) in editableTabs"
						:label="item.title"
						:name="item.name">
						{{item.content}}
				</el-tab-pane>
				
			</el-tabs>
			<!-- <el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">
				<el-tab-pane
					:key="item.name"
					v-for="(item, index) in editableTabs"
					:label="item.title"
					:name="item.name">
					{{item.content}}
				</el-tab-pane>
			</el-tabs> -->
		</el-row>
	</div>
</template>

<script>
	export default {
		
		data() {
			return {
				webs:[
					   {
					   id:1,
					   name:'百度百科',
					   href:'http://baike.baidu.com',
					   type:"搜索引擎",
					   start:5
					   },
					   {
					   	id:2,
					   	name:'唯品会',
					   	href:'http://www.vip.com',
						type:"电子商务",
					   	start:4
					   },
					   {
					   	id:3,
					   	name:'小米',
					   	href:'http://www.mi.com',
						type:"品牌营销",
					   	start:3
					   },
					],
					dialogFormVisible:false,
					form:{
							id:'',
							name:'',
							href:'',
							start:''
						},
					isedit:false,
					myindex:-1,
					types:["搜索引擎","电子商务","品牌营销"],
					colors:["gray","green","red"],
					editableTabsValue: '0',
					editableTabs: [{
						title: 'Tab 1',
						name: '1',
						content: 'Tab 1 content'
					}, {
						title: 'Tab 2',
						name: '2',
						content: 'Tab 2 content'
					}],
					tabIndex: 2
				};
		},
		methods:{
			del(index,id){
				this.$confirm(
					"你确定要删除该数据吗？",
					"温馨提示",
					{
							confirmButtonText:'确定',
							cancelButtonText:'取消',
							type:'warning'
					}
				).then(()=>{
					this.$message({
						type:"success",
						message:"删除成功！"
					});
					this.webs.splice(index,1);
				}).catch(()=>{
					this.$message({
						type:"info",
						message:"你已经取消"
					});
				})
			},
			edit(index,row){
				this.isedit=true;
				this.dialogFormVisible=true;
				this.form={
					id:row.id,
					name:row.name,
					start:row.start,
					type:row.type
				};
				this.mindex=index;
			},
			add(){
				this.dialogFormVisible=true;
			}
			,sureAdd(){
				//确认添加
				this.dialogFormVisible=false;
				this.webs.push(this.form);
			},
			sureUpdate:function(){
				//根据form.id确认要修改的webs的id值
				this.webs.splice(this.myindex,1,this.form);
				//确认修改
				this.dialogFormVisible=false;
				this.isedit=false;//修改状态结束
			},
			deletTag(){
				this.isedit=true;
				this.dialogFormVisible=true;
				this.form={
					id:row.id,
					name:row.name,
					start:row.start,
					type:row.type
				};
				this.mindex=index;
			},
			/* addTab(targetName) {
					let newTabName = ++this.tabIndex + '';
					this.editableTabs.push({
						title: 'New Tab',
						name: newTabName,
						content: 'New Tab content'
					});
					this.editableTabsValue = newTabName;
				}, */
				removeTab(targetName) {
					var tabs = this.editableTabs;
					var activeName = this.editableTabsValue;
					if (activeName === targetName) {
						tabs.forEach((tab, index) => {
							if (tab.name === targetName) {
								let nextTab = tabs[index + 1] || tabs[index - 1];
								if (nextTab) {
									activeName = nextTab.name;
								}
							}
						});
					}
					
					this.editableTabsValue = activeName;
					this.editableTabs = tabs.filter(tab => tab.name !== targetName);
				},
				toPerpage(){
					var i=this.editableTabs.length;
					var newTab={
						title: '个人主页',
						name: i+'',
						content: '个人主页....'
					};
					if(JSON.stringify(this.editableTabs).indexOf(JSON.stringify(newTab))==-1){
						newTab.name=parseInt(newTab.name)+1+'';
						this.editableTabs.push(newTab);
					}
				}
		},
	}
</script>
	
<style>
	.el-button{
		padding: 12px;
	}
	.el-tabs__nav .el-tabs__item:nth-child(1) span{
    display: none;
}
</style>
